import React, { PureComponent } from 'react';
import { connect } from 'dva';
import { FormInstance } from 'antd/lib/form';
import { Modal, Button, Form, Row, Col, Input, Select, Table } from 'antd';
import PropTypes from 'prop-types';
import styles from './index.less';

const mapStateToProps = (state: any) => ({
  ControlBoxMng: state.ControlBoxMng,
});
const resultOptions = [
  { label: '正常', value: 0 },
  { label: '控制盒编号已存在', value: 1 },
  { label: '控制盒编号异常', value: 2 },
  { label: '控制盒名称异常', value: 3 },
]
class ExportDetailModal extends PureComponent<any, any> {
  formRef = React.createRef<FormInstance>();
  static contextTypes = {
    permissions: PropTypes.array,
    dicData: PropTypes.object,
  };

  constructor(props: any) {
    super(props);
    this.state = {
      loading: false,
      newData: [],
    };
  }
  componentDidUpdate(prevProps: any) {
    const { modalVisible, cboxList } = this.props;
    if (modalVisible && modalVisible !== prevProps.modalVisible && cboxList.length > 0) {
      this.setState({
        newData: cboxList,
      });
    }
  }
  handleSubmit = () => {
    this.formRef.current?.submit();
  };
  handleFormReset = () => {
    const { cboxList } = this.props;
    const newData = cboxList;
    this.setState({
      newData: newData,
    });
    this.formRef.current?.resetFields();
  };
  //按照条件对列表进行数据筛选
  onFinish = (values: any) => {
    const { cboxList } = this.props;
    const result = values.result;
    const code = values.code ?? '';
    const newData = cboxList.filter(
      t => t.code.includes(code) && (typeof result !== 'number' || result === t.result),
    );
    this.setState({
      newData: newData,
    });
  };

  close = () => {
    const { closeModal } = this.props;
    this.formRef.current && this.formRef.current.resetFields();
    closeModal();
  };
  render() {
    const { modalVisible } = this.props;
    const columns = [
      {
        title: '序号',
        dataIndex: 'index',
        render: (text: any, record: any, index: any) => {
          return index + 1;
        },
      },
      {
        title: '控制盒编号',
        dataIndex: 'code',
        key: 'code',
      },
      {
        title: '控制盒名称',
        dataIndex: 'name',
        key: 'name',
      },
      {
        title: '导入状态',
        dataIndex: 'result',
        key: 'result',
        render: (text: any) => {
          return resultOptions.find(t=>t.value==text)?.label;
        },
      },
    ];
    return (
      <Modal
        title={'查看导入详情'}
        visible={modalVisible}
        width={700}
        footer={null}
        onCancel={this.close}
      >
        <div className={styles.tableListForm}>
          <Form onFinish={this.onFinish} ref={this.formRef}>
            <Row gutter={24} className={styles.my_searchRow}>
              <Col span={8}>
                <Form.Item name={'result'}>
                  <Select
                    placeholder="请选择导入状态"
                    options={resultOptions}
                  />
                </Form.Item>
              </Col>
              <Col span={8}>
                <Form.Item
                  name={'code'}
                  rules={[
                    {
                      required: false,
                      message: '请输入控制盒编号,只能输入英文及数字',
                      whitespace: true,
                      pattern: /^[A-Za-z0-9]+$/,
                    },
                  ]}
                >
                  <Input placeholder="请输入控制盒编号" maxLength={50} />
                </Form.Item>
              </Col>
              <Col span={8} style={{ textAlign: 'right', paddingTop: 8 }}>
                <span>
                  <Button type="primary" size={'small'} htmlType="submit">
                    查询
                  </Button>
                  <Button size={'small'} style={{ marginLeft: 8 }} onClick={this.handleFormReset}>
                    重置
                  </Button>
                </span>
              </Col>
            </Row>
          </Form>
        </div>
        <Row>
          <span style={{ color: 'red', fontSize: 12 }}>*导入状态正常的控制盒才可继续导入</span>
        </Row>
        <Row gutter={24}>
          <Col span={24}>
            <Table dataSource={this.state.newData} columns={columns} pagination={false} />
          </Col>
        </Row>
      </Modal>
    );
  }
}
export default connect(mapStateToProps)(ExportDetailModal);
